<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-xl p-6">
    <ol
      class="relative space-y-8 before:absolute before:-ml-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700"
    >
      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">12/02/2025</time>

          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Kickoff</h3>

          <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">15/03/2025</time>

          <h3 class="text-lg font-bold text-gray-900 dark:text-white">First Milestone</h3>

          <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">24/04/2025</time>

          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Launch</h3>

          <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>
    </ol>
  </body>
</html>
